/*
 * @Author       : NaN 353362604@qq.com
 * @Date         : 2023-05-08 16:02:08
 * @LastEditTime : 2023-08-15 13:23:01
 * @LastEditors  : NaN 353362604@qq.com
 * @FilePath     : \AdminStration\src\Pages\Front\jtgj\Templates\FivOne.jsx
 * @Description  :
 */
import { useBoolean, useEventEmitter } from 'ahooks'
import { beamUuid } from '../Data'
import { CommonSmallTitle } from '../Assets/Common/SmallTitle'
import { BeamYard001 } from '../Assets/Template/BeamYard'
import { BeamProduce001 } from '../Assets/Template/BeamProduce'

import { BeamMap001 } from '../Assets/Template/BeamMap'
import { BeamNavTop002 } from '../Assets/Template/BeamNavTop'
import { BeamSchedule001 } from '../Assets/Template/BeamSchedule'

import { useLocation } from 'react-router-dom'

import { parseURLParams } from '../../../Common/Configure/Common'

import { project } from '../../../Common/Data'
const { imageUrl } = project[window.location.hostname]

export const FivOne = () => {
    const NavEvent = useEventEmitter()

    const { search } = useLocation()
    const { uuid } = parseURLParams(search)
    const [navState, { toggle }] = useBoolean(true)

    NavEvent.useSubscription(val => {
        // console.log(val)
    })

    return (
        <div className="FivOne">
            <img onClick={toggle} className="navOpen" src={imageUrl + '切换.png'} alt="" />
            <BeamNavTop002 top={112} width="20vw" NavEvent={NavEvent} uuid={uuid} />
            <BeamMap001 uuid={beamUuid} NavEvent={NavEvent} />
            <div className={`Lef animate__animated ${navState ? 'animate__fadeInLeft' : 'animate__fadeOutLeft'} `}>
                <CommonSmallTitle className="ItemTitle" title="梁场概况" flex={296} style={{ marginBottom: 16 }}>
                    <BeamYard001 number={1} />
                </CommonSmallTitle>
                <CommonSmallTitle className="ItemTitle" title="生产能力" flex={528}>
                    <BeamProduce001 NavEvent={NavEvent} />
                </CommonSmallTitle>
            </div>
            <div className={`Rig animate__animated ${navState ? 'animate__fadeInRight' : 'animate__fadeOutRight'}`}>
                <CommonSmallTitle className="ItemTitle" title="进度占比" flex={1}>
                    <BeamSchedule001 NavEvent={NavEvent} />
                </CommonSmallTitle>
            </div>
        </div>
    )
}
